<template>
    <div class="check-entry">
        <el-form :model="dataForm" ref="dataForm" :rules="dataRule" label-width="92px" class="entry-form">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="工号" prop="eeNumber">
                        <el-input v-model="dataForm.eeNumber" placeholder="工号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="姓名" prop="realName">
                        <el-input v-model="dataForm.realName" placeholder="姓名"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="性别" prop="gender">
                        <el-radio-group v-model="dataForm.gender">
                            <el-radio label='0'>男</el-radio>
                            <el-radio label='1'>女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="年龄" prop="age">
                        <el-input v-model="dataForm.age" placeholder="年龄"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="民族" prop="nation">
                        <el-input v-model="dataForm.nation" placeholder="民族"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="籍贯" prop="nativePlace">
                        <el-input v-model="dataForm.nativePlace" placeholder="籍贯"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="政治面貌" prop="political">
                        <el-select v-model="dataForm.political" placeholder="请选择" style="width:100%">
                            <el-option v-for="item in politicalData" :key="item.value" :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="婚姻状况" prop="marriage">
                        <el-select v-model="dataForm.marriage" placeholder="请选择" style="width:100%">
                            <el-option v-for="item in marriageData" :key="item.value" :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="联系电话" prop="mobile">
                        <el-input v-model="dataForm.mobile" maxlength="11" placeholder="联系电话"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="身份证号" prop="idNumber">
                        <el-input type="text" placeholder="身份证号" v-model="dataForm.idNumber"
                                  maxlength="18"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="现住址" prop="address">
                        <el-input v-model="dataForm.address" placeholder="现住址"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="血型" prop="blood">
                        <el-select v-model="dataForm.blood" placeholder="请选择" style="width:100%">
                            <el-option v-for="item in bloodData" :key="item.value" :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="18">
                    <el-form-item label="健康状况" prop="healthy">
                        <el-select v-model="dataForm.healthy" placeholder="请选择" style="width:220px">
                            <el-option v-for="item in healthyData" :key="item.value" :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="学历" prop="education">
                        <el-select v-model="dataForm.education" placeholder="请选择" style="width:100%">
                            <el-option v-for="item in educationData" :key="item.value" :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="毕业院校" prop="graduate">
                        <el-input v-model="dataForm.graduate" placeholder="毕业院校"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="专业" prop="major">
                        <el-input v-model="dataForm.major" placeholder="专业" style="width:220px"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="开户行" prop="bank">
                        <el-input v-model="dataForm.bank" placeholder="开户行"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="18">
                    <el-form-item label="银行卡号" prop="bankCard">
                        <el-input v-model="dataForm.bankCard" maxlength="19" placeholder="银行卡号"
                                  style="width:220px"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="入职时间" prop="entryDate">
                        <el-date-picker v-model="dataForm.entryDate" type="date" placeholder="入职时间"
                                        value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="在职状态" prop="jobStatus">
                        <el-select v-model="dataForm.jobStatus" placeholder="请选择" style="width:100%">
                            <el-option v-for="item in jobStatusData" :key="item.value" :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="部门" prop="dept">
                        <ren-dept-tree v-model="dataForm.dept" :placeholder="$t('dept.title')" :query="true"
                                       ref="departmentRef"></ren-dept-tree>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="职务" prop="post">
                        <el-input v-model="dataForm.post" placeholder="职务"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="转正时间" prop="confirmDate">
                        <el-date-picker v-model="dataForm.confirmDate" type="date" placeholder="转正时间"
                                        value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="离职时间" prop="departDate">
                        <el-date-picker v-model="dataForm.departDate" type="date" placeholder="离职时间"
                                        value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="个人照片">
                <el-button type="primary" @click="uploadHandle()">{{ $t('oss.upload') }}</el-button>
                (只能上传一张个人照片)
            </el-form-item>
            <h3>家庭成员</h3>
            <div class="family">
                <el-row class="member-of-family">
                    <el-col :span="3">与本人关系</el-col>
                    <el-col :span="3">姓名</el-col>
                    <el-col :span="3">年龄</el-col>
                    <el-col :span="5">工作单位/就读院校</el-col>
                    <el-col :span="5">职业</el-col>
                    <el-col :span="3">联系电话</el-col>
                    <el-col :span="2">操作</el-col>
                </el-row>
                <div v-for="(item, index) in familyMembers" :key="index">
                    <el-row :gutter="20">
                        <el-col :span="3">
                            <el-input v-model="item.relationship" clearable placeholder="与本人关系"/>
                        </el-col>
                        <el-col :span="3">
                            <el-input v-model="item.realName" clearable placeholder="姓名"/>
                        </el-col>
                        <el-col :span="3">
                            <el-input v-model="item.age" clearable placeholder="年龄"/>
                        </el-col>
                        <el-col :span="5">
                            <el-input v-model="item.location" clearable placeholder="工作单位/就读院校"/>
                        </el-col>
                        <el-col :span="5">
                            <el-input v-model="item.occupation" clearable placeholder="职业"/>
                        </el-col>
                        <el-col :span="3">
                            <el-input v-model="item.mobile" maxlength="11" clearable placeholder="联系电话"/>
                        </el-col>
                        <el-col :span="2">
                            <el-button circle icon="el-icon-plus" @click="addList()"></el-button>
                            <el-button circle icon="el-icon-minus" @click="subList(item, index)"
                                       v-if="index > 0"></el-button>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <h3>教育培训</h3>
            <div class="family">
                <el-row class="member-of-family">
                    <el-col :span="5">起</el-col>
                    <el-col :span="5">止</el-col>
                    <el-col :span="6">学校或培训地点</el-col>
                    <el-col :span="6">专业/培训内容</el-col>
                    <el-col :span="2">操作</el-col>
                </el-row>
                <div v-for="(it, ins) in educationTraining" :key="ins">
                    <el-row :gutter="20">
                        <el-col :span="5">
                            <el-date-picker v-model="it.startDate" type="date" placeholder="起"
                                            value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-col>
                        <el-col :span="5">
                            <el-date-picker v-model="it.endDate" type="date" placeholder="止"
                                            value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-col>
                        <el-col :span="6">
                            <el-input v-model="it.location" clearable placeholder="学校或培训地点"/>
                        </el-col>
                        <el-col :span="6">
                            <el-input v-model="it.content" clearable placeholder="专业/培训内容"/>
                        </el-col>
                        <el-col :span="2">
                            <el-button circle icon="el-icon-plus" @click="addEducation()"></el-button>
                            <el-button circle icon="el-icon-minus" @click="subEducation(it, ins)"
                                       v-if="ins > 0"></el-button>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <h3>工作经历</h3>
            <div class="family">
                <el-row class="member-of-family">
                    <el-col :span="5">起</el-col>
                    <el-col :span="5">止</el-col>
                    <el-col :span="6">公司名称</el-col>
                    <el-col :span="6">岗位</el-col>
                    <el-col :span="2">操作</el-col>
                </el-row>
                <div v-for="(its, it) in workExperience" :key="it">
                    <el-row :gutter="20">
                        <el-col :span="5">
                            <el-date-picker v-model="its.startDate" type="date" placeholder="起"
                                            value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-col>
                        <el-col :span="5">
                            <el-date-picker v-model="its.endDate" type="date" placeholder="止"
                                            value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-col>
                        <el-col :span="6">
                            <el-input v-model="its.companyName" clearable placeholder="公司名称"/>
                        </el-col>
                        <el-col :span="6">
                            <el-input v-model="its.post" clearable placeholder="岗位"/>
                        </el-col>
                        <el-col :span="2">
                            <el-button circle icon="el-icon-plus" @click="addWork()"></el-button>
                            <el-button circle icon="el-icon-minus" @click="subWork(its, it)" v-if="it > 0"></el-button>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <el-button type="primary" @click="submitForm('dataForm')" style="margin:10px 2px">保存</el-button>
            <el-button type="primary" @click="cancelForm" style="margin:10px 2px">取消</el-button>
        </el-form>
        <upload v-if="uploadVisible" ref="upload" @refreshDataList="getDataList"></upload>
    </div>
</template>

<script>
import Cascader from '../../../../components/cascader-city.vue'
import RegionTree from '../../../../components/region-tree/index.vue'
import Upload from '../check-in-upload.vue'

export default {
    components: {
        Upload,
        RegionTree,
        Cascader
    },
    computed: {
        uploadDisabled: function () {
            return this.ruleForm.csAvatar != '';
        },
    },
    data() {
        return {
            uploadVisible: false,
            dataForm: {
                areas: '',//负责区域
                createDate: '',//创建时间
                creator: '',//创建者
                description: '',// 自我介绍
                height: '',// 身高
                updateDate: '',//更新时间
                updater: '',//更新者
                weight: '',//体重
                workAge: '',//工龄
                id: '',
                age: '',
                marriage: '',
                eeNumber: '',
                realName: '',
                gender: '0',
                nation: '',
                political: '',
                idNumber: '',
                mobile: '',
                nativePlace: '',
                address: '',
                blood: '',
                healthy: '',
                education: '',
                graduate: '',
                major: '',
                bank: '',
                bankCard: '',
                entryDate: '',
                post: '',
                dept: '',
                headUrl: '',
                jobStatus: '',
                confirmDate: '',
                departDate: '',
            },
            // 家庭成员
            familyMembers: [
                {
                    relationship: '',
                    realName: '',
                    age: '',
                    location: '',
                    occupation: '',
                    mobile: ''
                }
            ],
            // 教育培训
            educationTraining: [
                {
                    startDate: '',
                    endDate: '',
                    location: '',
                    content: '',
                }
            ],
            // 工作经历
            workExperience: [
                {
                    startDate: '',
                    endDate: '',
                    companyName: '',
                    post: '',
                }
            ],
            dataRule: {
                jobStatus: [
                    {required: true, message: this.$t('validate.required'), trigger: 'blur'}
                ],
                password: [
                    {required: true, message: this.$t('validate.required'), trigger: 'blur'}
                ],
                username: [
                    {required: true, message: this.$t('validate.required'), trigger: 'blur'}
                ],
                eeNumber: [
                    {required: true, message: this.$t('validate.required'), trigger: 'blur'}
                ],
                realName: [
                    {required: true, message: this.$t('validate.required'), trigger: 'blur'}
                ],
                nation: [
                    {required: true, message: this.$t('validate.required'), trigger: 'blur'}
                ],
                idNumber: [
                    {required: true, message: this.$t('validate.required'), trigger: 'blur'},
                    {
                        pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
                        message: '请输入正确的身份证号',
                        trigger: 'blur'
                    }
                ],
                mobile: [
                    {required: true, message: this.$t('validate.required'), trigger: 'blur'},
                    {
                        pattern: /^[1][3,4,5,7,8][0-9]{9}$/,
                        message: '请输入正确的电话号码',
                        trigger: 'blur'
                    }
                ],
                nativePlace: [
                    {required: true, message: this.$t('validate.required'), trigger: 'blur'}
                ],
                education: [
                    {required: true, message: this.$t('validate.required'), trigger: 'blur'}
                ],
                graduate: [
                    {required: true, message: this.$t('validate.required'), trigger: 'blur'}
                ],
                major: [
                    {required: true, message: this.$t('validate.required'), trigger: 'blur'}
                ],
                bankCard: [
                    {required: true, message: this.$t('validate.required'), trigger: 'blur'}
                ],
                entryDate: [
                    {required: true, message: this.$t('validate.required'), trigger: 'blur'}
                ],
                post: [
                    {required: true, message: this.$t('validate.required'), trigger: 'blur'}
                ],
                dept: [
                    {required: true, message: this.$t('validate.required'), trigger: 'blur'}
                ],
                healthy: [
                    {required: true, message: this.$t('validate.required'), trigger: 'blur'}
                ],
                bank: [
                    {required: true, message: this.$t('validate.required'), trigger: 'blur'}
                ],
                marriage: [
                    {required: true, message: this.$t('validate.required'), trigger: 'blur'}
                ],
                age: [
                    {required: true, message: this.$t('validate.required'), trigger: 'blur'}
                ]
            },
            ruleForm: {
                csAvatar: "",
            },
            bloodData: [
                {
                    value: 'A型',
                    label: 'A型'
                },
                {
                    value: 'B型',
                    label: 'B型'
                },
                {
                    value: 'AB型',
                    label: 'AB型'
                },
                {
                    value: 'O型',
                    label: 'O型'
                },
                {
                    value: 'Rh型',
                    label: 'Rh型'
                },
            ],
            healthyData: [
                {
                    value: '健康',
                    label: '健康'
                },
                {
                    value: '良好',
                    label: '良好'
                },
                {
                    value: '较差',
                    label: '较差'
                },
            ],
            educationData: [
                {
                    value: '小学',
                    label: '小学'
                },
                {
                    value: '初中',
                    label: '初中'
                },
                {
                    value: '高中',
                    label: '高中'
                },
                {
                    value: '专科',
                    label: '专科'
                },
                {
                    value: '本科',
                    label: '本科'
                },
                {
                    value: '硕士研究生',
                    label: '硕士研究生'
                },
                {
                    value: '博士研究生',
                    label: '博士研究生'
                },
            ],
            marriageData: [
                {
                    value: '未婚',
                    label: '未婚'
                },
                {
                    value: '已婚',
                    label: '已婚'
                },
            ],
            politicalData: [
                {
                    value: '中共党员',
                    label: '中共党员'
                },
                {
                    value: '中共预备党员',
                    label: '中共预备党员'
                },
                {
                    value: '共青团员',
                    label: '共青团员'
                },
                {
                    value: '民革党员',
                    label: '民革党员'
                },
                {
                    value: '民盟盟员',
                    label: '民盟盟员'
                },
                {
                    value: '民建会员',
                    label: '民建会员'
                },
                {
                    value: '民进会员',
                    label: '民进会员'
                },
                {
                    value: '农工党党员',
                    label: '农工党党员'
                },
                {
                    value: '致公党党员',
                    label: '致公党党员'
                },
                {
                    value: '九三学社社员',
                    label: '九三学社社员'
                },
                {
                    value: '台盟盟员',
                    label: '台盟盟员'
                },
                {
                    value: '无党派人士',
                    label: '无党派人士'
                },
                {
                    value: '群众',
                    label: '群众'
                },
            ],
            jobStatusData: [
                {
                    value: '在职',
                    label: '在职'
                },
                {
                    value: '离职',
                    label: '离职'
                },
                {
                    value: '试用期',
                    label: '试用期'
                },
                {
                    value: '临时工',
                    label: '临时工'
                },
            ],
            contractOptions: [
                {
                    value: '在职',
                    label: '在职'
                },
                {
                    value: '离职',
                    label: '离职'
                },
            ],
        }
    },
    mounted() {
        // 进入页面-数据渲染
        this.$refs.departmentRef.showDeptName = this.department
        this.getFamily();
        this.getEducation();
        this.getWorkExperience();
    },
    props: {
        employeeId: {
            type: String,
        },
        department: {
            type: String,
        }
    },
    methods: {
        getFamily() {
            this.$http['get'](`/employee/employeefamily/page`, {params: {employeeId: this.employeeId}}).then(({data: res}) => {
                if (res.code === 0) {
                    this.familyMembers = res.data.list
                } else {
                    return this.$message.error(res.msg);
                }
            }).catch(() => {
            })
        },
        getEducation() {
            this.$http['get'](`/employee/employeeeducation/page`, {params: {employeeId: this.employeeId}}).then(({data: res}) => {
                if (res.code === 0) {
                    this.educationTraining = res.data.list
                } else {
                    return this.$message.error(res.msg);
                }
            }).catch(() => {
            })
        },
        getWorkExperience() {
            this.$http['get'](`/employee/employeejob/page`, {params: {employeeId: this.employeeId}}).then(({data: res}) => {
                if (res.code === 0) {
                    this.workExperience = res.data.list
                } else {
                    return this.$message.error(res.msg);
                }
            }).catch(() => {
            })
        },
        // 家庭成员-加号
        addList() {
            this.familyMembers.push({
                relationship: '',
                realName: '',
                age: '',
                location: '',
                occupation: '',
                mobile: ''
            })
        },
        // 家庭成员-减号
        subList(item, index) {
            this.$http['delete'](`/employee/employeefamily`, {data: [item.id]}).then(({data: res}) => {
                if (res.code === 0) {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                    this.familyMembers.splice(index, 1)
                }
            }).catch(() => {
            })
        },
        // 教育培训-加号
        addEducation() {
            this.educationTraining.push({
                startDate: '',
                endDate: '',
                location: '',
                content: '',
            })
        },
        // 教育培训-减号
        subEducation(it, index) {
            this.$http['delete'](`/employee/employeeeducation`, {data: [it.id]}).then(({data: res}) => {
                if (res.code === 0) {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                    this.educationTraining.splice(index, 1)
                }
            }).catch(() => {
            })
        },
        // 工作经历-加号
        addWork() {
            this.workExperience.push({
                startDate: '',
                endDate: '',
                companyName: '',
                post: '',
            })
        },
        // 工作经历- 减号
        subWork(its, index) {
            this.$http['delete'](`/employee/employeejob`, {data: [its.id]}).then(({data: res}) => {
                if (res.code === 0) {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                    this.workExperience.splice(index, 1)
                }
            }).catch(() => {
            })
        },
        // 表单提交接口----------------
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.dataForm.familys = this.familyMembers;
                    this.dataForm.jobs = this.workExperience;
                    this.dataForm.educations = this.educationTraining;
                    this.$http['put'](`/employee/employee`, this.dataForm).then(({data: res}) => {
                        if (res.code === 0) {
                            this.$message({
                                message: '保存人员基本信息成功',
                                type: 'success'
                            })
                            this.$emit('editedContent')
                        } else {
                            return this.$message.error(res.msg);
                        }
                    }).catch(() => {
                    })
                } else {
                    return false;
                }
            });
        },
        // 上传照片
        uploadHandle() {
            this.uploadVisible = true
            this.$nextTick(() => {
                this.$refs.upload.init();
            })
        },
        // 图片的url
        getDataList(url) {
            this.dataForm.headUrl = url
        },
        cancelForm() {
            this.$emit('editedContent')
        }
    }
}
</script>
<style lang="scss" scoped>
.check-entry {
  background-color: #ffffff;
}

.entry-form {
  padding: 10px 10px;
}

.family {
  border: 1px solid #c6a8a8;
  padding: 5px;
}

.member-of-family {
  text-align: center;
}

.introduce-oneself {
  margin-top: 20px
}

.el-row {
  margin-top: 5px
}

.el-col {
  margin-top: 5px;
}
</style>